import { Carousel } from 'antd';
import { useState, useEffect, createRef, useCallback, useRef } from 'react';
import { getImgList as getImgListData } from '../servies';
import { BannerProps } from '../index';
import { getEditor, InbizIcon } from '@inbiz/utils';
import { routerPrefix } from 'InbizConfig';
import { Spin } from 'antd';
import { useEvents } from '@inbiz/utils';
import { TextWidget } from '@inbiz/react';
import { Empty } from 'antd-mobile';

const FocusPicture = (props: BannerProps) => {
  const {
    fixImgCate,
    autoRoll,
    showImgTitle,
    viewType_h5,
    prefixCls = 'inbiz-Banner',
    detail,
    MaximumDisplayQuantity,
    delay = 2,
  } = props;
  const [imgList, setImgList] = useState<Banner.ImgItem[]>([]);
  const [wrapperStyle, setWrapperStyle] = useState<any>({});
  const wrapper = createRef<any>();

  const [configEvents] = useEvents(props.callBackEvents, props.emit)
  const getImgList = useCallback(async (params: object) => {
    const newParams = (await configEvents.current?.onParams?.(params)) || params;
    const data = await (configEvents.current?.onRequest || getImgListData)(newParams as any);
    return await configEvents.current?.onData?.(data) || data
  }, []);

  //图片列表接口
  useEffect(() => {
    getImgList({
      categoryId: fixImgCate?.map((item: any) => item.id).toString(),
      pageIndex: 1,
      pageSize: MaximumDisplayQuantity,
    }).then((res) => {
      setImgList(res?.ContentList || []);
    });
  }, [fixImgCate, viewType_h5, MaximumDisplayQuantity]);

  //跳转至详情页
  const gotoDetail = (record: any) => {
    const { ID, ImgLinkUrl } = record;
    const { origin, pathname, search } = window.location;
    <Spin />;
    if (getEditor()) return;
    <Spin />;
    if (!detail) {
      if (ImgLinkUrl && ImgLinkUrl !== 'isPureGraphMode') {
        window.location.href = ImgLinkUrl;
        return;
      }
    } else {
      const pageRoute = detail.split(',')[0];
      // 1./inbiz/web/editor/aok(设计器)  2./inbiz/web/aok(预览)
      // window.open(`${origin}${pathname}${search}#${routerPrefix}${pageRoute}?imgId=${ID}`);
      window.location.href = `${origin}${pathname}${search}#${routerPrefix}${pageRoute}?imgId=${ID}`;
    }
  };

  return (
    <>{imgList?.length > 0 ? <div
      className={`${prefixCls}-wrapper ${prefixCls}-${viewType_h5}`}
      style={wrapperStyle}
      ref={wrapper}
    >
      <Carousel
        key={imgList?.length}
        autoplay={imgList.length > 1 ? autoRoll : false}
        autoplaySpeed={delay * 1000}
        dots={true}
      >
        {imgList.map((i, index) => {
          return (
            <div>
              <div
                className={`${prefixCls}-content`}
                key={`${i.ID}_${index}`}
                onClick={() => gotoDetail(i)}
              >
                <img
                  className={`img-item ${prefixCls}-content-img`}
                  style={{ height: wrapperStyle.height }}
                  src={i.ImgUrl}
                />
                {showImgTitle && (
                  <div
                    className={`${prefixCls}-content-title ${prefixCls}-${viewType_h5}-title`}
                    style={{ fontSize: 'var(--inbiz-font-size-base)' }}
                  >
                    {i.Title}
                  </div>
                )}
              </div>
            </div>
          );
        })}
      </Carousel>
    </div> : <div style={{ padding: '16px' }}>
      <Empty
        image={<InbizIcon type="icon-ic-zanwushuju" style={{ fontSize: '50px' }} />}
        description={<TextWidget>Banner.noData</TextWidget>}
      />
    </div>}</>

  );
};
export default FocusPicture;
